<template>
    <div>
        <h3 class="mb-3" style="user-select: none">主题设置</h3>

        <v-checkbox
            :model-value="theme.follow"
            @update:model-value="theme.setFollow"
            label="跟随系统主题变化"
        ></v-checkbox>

        <v-select
            label="主题"
            :items="
                theme.themes.map((theme, index) => {
                    return { index, description: theme.description };
                })
            "
            item-title="description"
            item-value="index"
            :model-value="theme.themes[theme.index]"
            @update:model-value="theme.setTheme"
        ></v-select>
    </div>
</template>

<script setup lang="ts">
import useThemeStore from "@/store/theme";

const theme = useThemeStore();
</script>
